<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        border: 1px solid black;
        margin-bottom: 20px;
        width: 600px;
        height: 400px;
      }
    </style>
    <script src="./assets/echarts/echarts.js"></script>
    <script>
      // 生成固定长度的数值数组数据
      function getData(num = 6) {
        let arr = [];
        for (let i = 0; i < num; i++) {
          arr.push(Math.ceil(Math.random() * 100));
        }
        return arr;
      }
    </script>
  </head>
  <body>
    <div id="char1" class="box"></div>
    <script>
      let chart1 = echarts.init(document.querySelector("#char1"));
      /** @type EChartsOption */
      chart1.setOption({
        title: {
          text: "柱状图",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: ["数学", "语文", "英语", "游戏"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            data: [90, 76, 86, 100],
          },
        ],
      });
    </script>

    <div id="char2" class="box"></div>
    <script>
      let chart2 = echarts.init(document.querySelector("#char2"));
      /** @type EChartsOption */
      chart2.setOption({
        title: {
          text: "折线图",
        },
        tooltip: {},
        xAxis: {
          // x轴默认就是 类目规则，可以省略类目配置
          data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
        },
        yAxis: {
          // y轴默认就是 数据轴，可以省略配置
        },
        series: [
          {
            type: "line",
            smooth: true,
            data: getData(7),
          },
        ],
      });
    </script>

    <div id="char3" class="box"></div>
    <script>
      let chart3 = echarts.init(document.querySelector("#char3"));
      /** @type EChartsOption */
      chart3.setOption({
        title: {
          text: "饼状图",
        },
        // 图例组件=>用于做数据的筛选操作
        legend: {},
        tooltip: {},
        series: [
          {
            type: "pie",
            // 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
            // 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
            roseType: "radius",
            // number：直接指定外半径值。
            // string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
            // radius: [20, 150],
            radius: ["20%", "70%"],
            // 设置图形数据的独立效果样式
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 6,
            },
            data: [
              { name: "线上销售", value: 100 },
              { name: "实体店销售", value: 300 },
              { name: "直播带货销售", value: 500 },
              { name: "优惠卷销售", value: 200 },
            ],
          },
        ],
      });
    </script>
    <div class="box-parent">
      <div id="char31" class="box"></div>
      <div class="title">特殊标签标题</div>
    </div>
    <style>
      .box-parent {
        position: relative;
        display: inline-block;
      }
      .title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 100%);
        font-size: 18px;
        color: #5070dd;
      }
    </style>
    <script>
      let chart31 = echarts.init(document.querySelector("#char31"));
      /** @type EChartsOption */
      chart31.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "70%"],
            // 饼图绘制的起始点
            startAngle: 180,
            // 饼图的终止节点
            endAngle: 360,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 6,
              borderRadius: 8,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
      });
    </script>

    <div id="char4" class="box"></div>
    <script>
      let char4 = echarts.init(document.querySelector("#char4"));
      /** @type EChartsOption */
      char4.setOption({
        title: {
          text: "散点图",
        },
        xAxis: {},
        yAxis: {},
        series: [
          {
            // 散点图类型
            type: "scatter",
            // type: "effectScatter",
            // 远点半径
            symbolSize: 20,
            data: [
              // 一个散点 [x,y]
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68],
              [10.0, 8.04],
            ],
          },
          {
            type: "effectScatter",
            symbolSize: 24,
            data: [[2, 3]],
            itemStyle: {
              color: "red",
            },
          },
        ],
      });
    </script>
    <div id="char5" class="box"></div>
    <script>
      let char5 = echarts.init(document.querySelector("#char5"));
      /** @type EChartsOption */
      char5.setOption({
        title: {
          text: "雷达图",
        },
        tooltip: {},
        legend: {
          data: ["Allocated Budget", "Actual Spending"],
        },
        // 定义雷达图的坐标
        radar: {
          // 雷达指示器【定义几维】
          //    数组的元素数量，决定是几边形
          indicator: [
            // 对象有雷达坐标名，和改坐标的最大值决定
            { name: "Sales", max: 6500 },
            { name: "Administration", max: 16000 },
            { name: "Information Technology", max: 30000 },
            { name: "Customer Support", max: 38000 },
            { name: "Development", max: 52000 },
            { name: "Marketing", max: 25000 },
          ],
        },
        series: [
          {
            type: "radar",
            // 一个雷达图可以定义多个数据
            areaStyle: {
              // 强制设置所有雷达图的区域颜色
              // color: "#738de4",
              // 不定义color会自动识别区域颜色
            },
            data: [
              {
                // 雷达坐标的数据,数据和坐标值通过数组下标对应
                value: [0, 3000, 20000, 35000, 50000, 18000],
                name: "独立数据的名字，用于提示描述",
              },
              // 多个雷达数据叠加
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: "Actual Spending",
              },
            ],
          },
        ],
      });
    </script>
  </body>
</html>
